<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { editBackup, getbackupDetail } from '@/api/syssetting';
  import { FormInstance, Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { dynamicTransformToDescriptions } from '../../handleData';
  import {
    cancel_approval,
    getapprovalDetail,
    pass_approval,
    refuseApproval,
  } from '@/api/approve';
  import { useUserStore } from '@/store';
  import SvgIcon from '@/components/svgIcon/index.vue';
  const formRef = ref<FormInstance | null>(null);
  const props = defineProps({
    visible: Boolean,
    params: Object,
    formType: {
      type: Array,
      default: () => [], // 这里默认值建议返回空数组，而不是空对象
    },
  });
  const userStore = useUserStore();
  const { loading, setLoading } = useLoading();
  const isShow = ref(true);
  defineOptions({
    name: 'addBackup',
  });
  const formData = ref({
    cancel_msg: '',
  });
  const checkMethodsData = ref(null);
  watch(
    () => props.params,
    (newVal) => {
      getapprovalDetail({
        ins_id: newVal,
      }).then((res) => {
        checkMethodsData.value = res.data;
        checkMethodsData.value.form_data = dynamicTransformToDescriptions(
          checkMethodsData.value.form_data
        );
        console.log(
          dynamicTransformToDescriptions(checkMethodsData.value.form_data)
        );
      });
    },
    {
      deep: true,
      immediate: true,
    }
  );

  const emit = defineEmits(['update:visible', 'refresh']);

  const handleSubmit = async (status) => {
    if (!formData.value.cancel_msg) {
      Message.error('请输入审批意见后提交！');
      return false;
    }
    setLoading(true);
    if (status === 0) {
      pass_approval({
        ins_id: props.params,
        pass_msg: formData.value.cancel_msg,
      })
        .then((res) => {
          if (res.code === 200) {
            Message.success(res.msg);
            emit('update:visible', false);
            setLoading(false);
            emit('refresh');
          }
        })
        .finally(() => {
          setLoading(false);
        });
    } else if (status === 1) {
      refuseApproval({
        ins_id: props.params,
        refuse_msg: formData.value.cancel_msg,
      })
        .then((res) => {
          if (res.code === 200) {
            Message.success(res.msg);
            emit('update:visible', false);
            setLoading(false);
            emit('refresh');
          }
        })
        .finally(() => {
          setLoading(false);
        });
    } else if (status === 2) {
      cancel_approval({
        ins_id: props.params,
        cancel_msg: formData.value.cancel_msg,
      })
        .then((res) => {
          if (res.code === 200) {
            Message.success(res.msg);
            emit('update:visible', false);
            setLoading(false);
            emit('refresh');
          }
        })
        .finally(() => {
          setLoading(false);
        });
    } else {
      Message.error('参数：状态错误！');
    }
  };
</script>

<template>
  <a-modal
    title="审批事件"
    :visible="visible"
    @ok="handleSubmit"
    title-align="start"
    :ok-loading="loading"
    width="50%"
    @cancel="
      () => {
        emit('update:visible', false);
      }
    "
  >
    <a-descriptions
      v-if="checkMethodsData"
      bordered
      size="large"
      tableLayout="auto"
    >
      <a-descriptions-item
        v-for="(item, index) in checkMethodsData.form_data"
        :label="item.label"
        :key="index"
        :span="item.label == '借阅明细' ? 24 : 1"
      >
        <span v-if="item.label !== '用户签名' && item.label !== '借阅明细'">{{
          item.value
        }}</span>
        <div v-else-if="item.label === '用户签名'">
          <a-image width="50px" :src="item.value" />
        </div>
        <span v-else-if="item.label === '借阅明细'">
          <a-list-item v-for="(citem, cindex) in item.value" :key="cindex">
            <a-list-item-meta :title="citem.文档名称 + '  ' + citem.文档编号">
              <template #avatar>
                <SvgIcon
                  class="icon"
                  name="open"
                  style="width: 26px; height: 26px"
                />
              </template>
            </a-list-item-meta>
            <template #actions>
              <a-tooltip content="借阅数量">
                <div style="display: flex; align-items: center">
                  {{ citem.借阅数量 }}
                  <icon-file />
                </div>
              </a-tooltip>
            </template>
          </a-list-item>
        </span>
      </a-descriptions-item>
    </a-descriptions>
    <a-descriptions
      title="审批"
      style="margin-top: 20px"
      v-if="checkMethodsData?.approval_data"
    >
      <a-descriptions-item label="审批人" :span="1">
        {{ checkMethodsData.approval_data.approve_names }}
      </a-descriptions-item>
      <a-descriptions-item label="抄送人" :span="1">
        {{ checkMethodsData.approval_data.copy }}
      </a-descriptions-item>
      <a-descriptions-item label="审批状态" :span="24">
        <a-tag v-if="checkMethodsData.approval_data.state == 1" color="cyan"
          >审核中</a-tag
        >
        <a-tag
          color="orangered"
          v-if="checkMethodsData.approval_data.state == 2"
          >已撤销</a-tag
        >
        <a-tag color="green" v-if="checkMethodsData.approval_data.state == 3"
          >已通过</a-tag
        >
        <a-tag color="red" v-if="checkMethodsData.approval_data.state == 4"
          >已拒绝</a-tag
        >
      </a-descriptions-item>
      <a-descriptions-item label="审批流程" :span="24">
        <a-timeline style="margin-top: 20px" lineType="dashed">
          <a-timeline-item
            v-for="item in checkMethodsData.approval_data.record"
            :label="item.split(' ')[0] + ' ' + item.split(' ')[1]"
          >
            {{ item.split(' ')[2] }}
            <br />
            <a-typography-text
              type="secondary"
              :style="{ fontSize: '12px', marginTop: '4px', color: '#165DFF' }"
            >
              {{ item.split(' ')[2].split('。')[1] }}
            </a-typography-text>
          </a-timeline-item>
        </a-timeline>
      </a-descriptions-item>
      <a-descriptions-item
        label="审批意见"
        :span="24"
        v-if="
          checkMethodsData.approval_data.approve_ids.includes(userStore.userID)
        "
      >
        <a-textarea
          v-model="formData.cancel_msg"
          placeholder="请输入审批意见"
          allow-clear
        />
      </a-descriptions-item>
    </a-descriptions>
    <template #footer>
      <div v-if="checkMethodsData?.approval_data">
        <a-button-group
          size="large"
          v-if="
            checkMethodsData.approval_data.approve_ids.includes(
              userStore.userID
            )
          "
        >
          <a-button status="success" @click="handleSubmit(0)">
            <template #icon>
              <icon-check-circle-fill size="16" />
            </template>
            确认
          </a-button>
          <a-button status="danger" @click="handleSubmit(1)">
            <template #icon>
              <icon-close-circle-fill size="16" />
            </template>
            拒绝</a-button
          >
          <a-button status="warning" @click="handleSubmit(2)">
            <template #icon>
              <icon-minus-circle-fill size="16" />
            </template>
            撤销
          </a-button>
        </a-button-group>
        <a-button
          v-else
          size="large"
          @click="
            () => {
              emit('update:visible', false);
            }
          "
        >
          关闭
        </a-button>
      </div>
    </template>
  </a-modal>
</template>

<style scoped lang="less">
  :deep(.arco-select-view-inner) {
    text-align: left !important;
  }
</style>
